[Tableau] JavaScript API 複数シートの制御

車輪開発大好きおたいがです。こんにちは。( 挨拶 )

先日に引き続き、Tableau JavaScript API の How To を掘り下げていきます。今回は複数のシートを持つ Tableau ワークブックの制御方法をまとめました。

複数のシートで構成されたワークブックの書出し

Tableau Server にワークブックを書き出すときには、任意のシートを複数選択することが可能です。

参考 : 公式リファレンス「Tableau Server にワークブックをパブリッシュする方法」

書出し設定のダイアログ上にある「共有するビュー (Views to Share) 」を選択します。

Tableau Public に書き出すときには、ワークブック内のシートがすべて含まれてしまうので注意が必要です。

シートのタブ UI 表示切り替え

複数のシートを持つワークブックは、書き出すときに「シート切り替え用のタブ UI 」の表示 / 非表示を設定することができます。

また、タブ UI が含まれたワークブックの場合でも JavaScript API を使用すれば、動的にタブ UI の表示切り替えが可能です。Viz クラスのインスタンスを生成するときのオプション hideTabs プロパティの切り替えで実現できます。

var options = {
    'width'              : 800,
    'height'             : 640,
    'hideTabs'           : true, // true で非表示、false で表示
    'hideToolbar'        : true,
    'onFirstInteractive' : function () {
        workbook = viz.getWorkbook();
        activeSheet = workbook.getActiveSheet();
    }
};
viz = new tableau.Viz(placeholderDiv, url, options);

複数のシート情報取得

一連のシート情報はワークブックが保持しているので workbook.getPublishedSheetsInfo() メソッドを使用することでシート情報 (SheetInfo) クラスの配列を取得することができます。( Sheet クラスではないので注意が必要です )

…
var selectChangeHandler = function() {
    workbook.activateSheetAsync( $select.val() );
};
var options = {
    'hideTabs'           : false,
    'hideToolbar'        : true,
    'onFirstInteractive' : function () {
        workbook       = viz.getWorkbook();
        var sheetsInfo = workbook.getPublishedSheetsInfo();
        $.each(sheetsInfo, function(i, sheetInfo) {
          $select.append('<option>'+ sheetInfo.getName() + '</option>');
        });
    }
};
viz = new tableau.Viz(placeholderDiv, url, options);
$body.on('change', SELECTORS.SHEETS_GROUP, selectChangeHandler);

任意のシートのアクティブ化 ( 選択切り替え )

シート情報の取得と同様、ワークブックに対してセットするので workbook.activateSheetAsync(sheetNameOrIndex) メソッドを使用することで任意のシートをアクティブ化してタブを切り替えることができます。

外部から切り替え制御を行っても、タブ UI も同期して切り替わる仕様になっているあたりはさすがと思いました。

…
var selectChangeHandler = function() {
    workbook.activateSheetAsync( $select.val() );
};
var options = {
    'hideTabs'           : false,
    'hideToolbar'        : true,
    'onFirstInteractive' : function () {
        workbook       = viz.getWorkbook();
        var sheetsInfo = workbook.getPublishedSheetsInfo();
        $.each(sheetsInfo, function(i, sheetInfo) {
          $select.append('<option>'+ sheetInfo.getName() + '</option>');
        });
    }
};
viz = new tableau.Viz(placeholderDiv, url, options);
$body.on('change', SELECTORS.SHEETS_GROUP, selectChangeHandler);

実際に使用するときは、事前に取得していたシート名またはシートのインデックスを、何かしらの手段で抽出してセットするシナリオになると考えます。

サンプル

複数タブを持つ Tableau ワークブックのシート情報を取得して、自前で UI ( SELECT 要素 ) を構築して切り替えるサンプルを作成しました。"Custom UI" と書かれた見出し直下に配置している SELECT 要素を切り替えることで動作が確認できます。

まとめ

ワークブックの切り替え制御についてまとめてみました。JavaScript API のシート制御機能を使用することで、Tableau ワークブック標準のタブ UI を使用せずとも、自前で切り替え UI を構築することができるということに気付いていただけると幸いです。